<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          type="primary"
          @click="toQuery"
          size="mini">
          查询结果
        </el-button>
        <el-button
          @click="resetSearch"
          style="float: right;margin-right: 15px"
          size="mini">
          重置
        </el-button>
        <el-button
          v-permission="['admin','course:add']"
          @click="add"
          style="float: right;margin-right: 10px"
          class="btn-add"
          type="success"
          size="mini">
          添加
        </el-button>
      </div>
      <div style="margin-top: 20px">
        <el-form :inline="true" size="small" label-width="100px">
          <el-form-item label="id：">
            <el-input style="width: 180px" v-model="query.id" placeholder="请输入id" clearable
                      @change="toQuery"></el-input>
          </el-form-item>
          <el-form-item label="名字：">
            <el-input style="width: 180px" v-model="query.name" placeholder="名字模糊匹配" clearable
                      @change="toQuery"></el-input>
          </el-form-item>
          <el-form-item label="发布时间：">
            <el-date-picker
              @change="toQuery"
              v-model="query.time"
              type="datetimerange"
              range-separator=":"
              class="el-range-editor--small filter-item"
              style="float: right;height: 30.5px;width: 350px"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-table v-loading="loading" border style="margin-top: 15px" :data="data" row-key="id" size="small">
      <el-table-column fixed="left" width="180" align="center" label="id" prop="id">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点我复制" placement="top-start">
            <span style="cursor: pointer" v-copy:callback="handleCopied" v-copy="scope.row.id">{{scope.row.id}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="left" width="180" align="center" label="名字" prop="name"/>
      <el-table-column fixed="left" align="center" label="备注" prop="remark"/>
      <el-table-column align="center" width="180" prop="createTime" label="创建日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px"
                       align="center" fixed="right">
        <template slot-scope="scope">
          <el-button v-permission="['admin','course:edit']" size="mini" type="primary"
                     :icon="'el-icon-edit'"
                     @click="edit(scope.row)">
          </el-button>
          <el-popover
            :ref="scope.row.id"
            placement="top"
            width="200">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定
              </el-button>
            </div>
            <el-button v-permission="['admin','course:del']" slot="reference"
                       type="danger" icon="el-icon-delete" size="mini">
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
  import initData from '@/mixins/initData'
  import {parseTime} from '@/utils/index'
  import {mapGetters} from 'vuex'
  import {getToken} from '@/utils/auth'
  import {add, update, del} from '@/api/business/courseApi'

  export default {
    mixins: [initData],
    computed: {
      ...mapGetters([
        'fileUploadApi',
      ])
    },
    data() {
      return {
        headers: {
          'Authorization': 'Bearer ' + getToken()
        },
        isAdd: true,
        delLoading: false,
        loading: false, dialog: false,
        form: {
          name: '',
          picture: [],
          courseTopType: '',
          courseType: '',
          label: '',
          desType: '',
          desPic: '',
          des: '',
          teacherPicture: '',
          teacher: '',
          teacherJob: '',
          teacherDes: '',
          payType: '',
          free: '',
          upTime: '',
          downTime: '',
          weekDays: [],
          productTime: '',
          price: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入名字', trigger: 'blur'}
          ],
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      subDelete(id) {
        this.delLoading = true
        del(id).then(res => {
          this.delLoading = false
          this.$refs[id].doClose()
          this.init()
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          this.delLoading = false
          this.$refs[id].doClose()
        })
      },
      add() {
        this.dialog = true;
        this.isAdd = true;
      },
      parseTime,
      beforeInit() {
        this.url = 'api/course'
        this.params = {page: this.page, size: this.size}
        const query = this.query
        if (query.name) {
          this.params['name'] = query.name
        }
        if (query.id) {
          this.params['id'] = query.id
        }
        if (query.time && query.time.length > 0) {
          this.params['startTime'] = query.time[0]
          this.params['endTime'] = query.time[1]
        }
        return true
      },
      resetSearch() {
        this.query = {}
        this.init()
      },
    }
  }
</script>

<style scoped>

</style>
